<template>
	<view class="summary-detail-container">
		

		<scroll-view class="form-scroll" scroll-y>
			<view class="form-content">
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">总重量</text>
					</view>
					<input class="form-input" v-model="form.totalWeight" type="number" placeholder="请输入总重量" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">出成率</text>
					</view>
					<input class="form-input" v-model="form.yieldRate" type="number" placeholder="请输入出成率" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">总金额</text>
					</view>
					<input class="form-input" v-model="form.amount" type="number" placeholder="请输入总金额" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">复核</text>
					</view>
					<input class="form-input" v-model="form.recheck" type="text" placeholder="请输入复核信息" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">供应商/交货人</text>
					</view>
					<input class="form-input" v-model="form.supplierPerson" type="text" placeholder="请输入供应商/交货人" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">司机员</text>
					</view>
					<input class="form-input" v-model="form.driver" type="text" placeholder="请输入司机员" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">品控人</text>
					</view>
					<input class="form-input" v-model="form.qualityPerson" type="text" placeholder="请输入品控人" />
				</view>
				<view class="form-item">
					<view class="label-row">
						<text class="form-label">采购员</text>
					</view>
					<input class="form-input" v-model="form.purchaser" type="text" placeholder="请输入采购员" />
				</view>
				
				<!-- 单据照片部分 -->
				<view class="form-item photos">
					<view class="label-row">
						<!-- <text class="form-label">单据照片</text> -->
					</view>
					<view class="photo-card">
						<view class="photo-header">
							<text class="photo-title">单据凭证材料</text>
							<text class="photo-desc">需上传 {{ minBillPhotos }}-{{ maxBillPhotos }} 张单据照片</text>
						</view>
						<view class="photo-grid">
							<view class="photo-item" v-for="(photo, index) in billPhotos" :key="photo">
								<image class="photo-image" :src="photo" mode="aspectFill" @click="previewPhoto(index)" />
								<view class="photo-delete" @click.stop="removePhoto(index)">
									<text class="delete-icon">×</text>
								</view>
							</view>
							<view class="photo-item upload" v-if="billPhotos.length < maxBillPhotos" @click="choosePhotos">
								<view class="upload-icon">
									<text class="camera-icon">📷</text>
								</view>
								<text class="upload-text">添加照片</text>
								<text class="upload-sub">需{{ minBillPhotos }}-{{ maxBillPhotos }}张</text>
							</view>
						</view>
						<text class="photo-tip">已选 {{ billPhotos.length }} 张</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 悬浮拍照按钮 -->
		<view class="photo-fab" @click="openPhotoManager">
			<text class="fab-icon">📷</text>
		</view>
		
		<view class="button-group">
			<button class="prev-btn" @click="prevStep">上一步</button>
			<button class="save-btn" :class="{ 'disabled': submitting }" :disabled="submitting" @click="saveData">
				{{ submitting ? '保存中...' : '保存' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					totalWeight: '',
					yieldRate: '',
					amount: '',
					recheck: '',
					supplierPerson: '',
					driver: '',
					qualityPerson: '',
					purchaser: ''
				},
				submitting: false,
				billPhotos: [],
				minBillPhotos: 1,
				maxBillPhotos: 5
			}
		},
		computed: {
			isFormValid() {
				return this.billPhotos.length >= this.minBillPhotos && 
					   this.form.totalWeight && 
					   this.form.yieldRate && 
					   this.form.amount;
			}
		},
		onLoad() {
			this.restoreMediaData();
			this.loadFormData();
		},
		methods: {
			/**
			 * 打开照片管理页面
			 */
			openPhotoManager() {
				uni.navigateTo({
					url: '/pages/home/gongchang/photo-manager'
				});
			},
			prevStep() {
				uni.navigateBack();
			},
			choosePhotos() {
				const remaining = this.maxBillPhotos - this.billPhotos.length;
				if (remaining <= 0) {
					uni.showToast({
						title: `最多上传${this.maxBillPhotos}张照片`,
						icon: 'none'
					});
					return;
				}
				uni.chooseImage({
					count: remaining,
					sizeType: ['compressed'],
					success: (res) => {
						const merged = [...this.billPhotos, ...res.tempFilePaths];
						this.billPhotos = merged.slice(0, this.maxBillPhotos);
					}
				});
			},
			previewPhoto(index) {
				if (!this.billPhotos.length) return;
				uni.previewImage({
					current: this.billPhotos[index],
					urls: this.billPhotos
				});
			},
			removePhoto(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该照片吗？',
					success: (res) => {
						if (res.confirm) {
							const list = [...this.billPhotos];
							list.splice(index, 1);
							this.billPhotos = list;
						}
					}
				});
			},
			/**
			 * 加载表单数据
			 */
			loadFormData() {
				try {
					const savedData = uni.getStorageSync('factoryFormData')
					if (savedData) {
						this.form = {
							...this.form,
							...savedData
						}
					}
				} catch (error) {
					console.error('加载表单数据失败:', error)
				}
			},

			restoreMediaData() {
				const savedBill = uni.getStorageSync('factoryBillPhotos') || [];
				this.billPhotos = Array.isArray(savedBill) ? savedBill : [];
			},
			/**
			 * 验证单据照片
			 */
			validatePhotos() {
				if (this.billPhotos.length < this.minBillPhotos) {
					uni.showToast({
						title: `请至少上传${this.minBillPhotos}张单据照片`,
						icon: 'none'
					})
					return false
				}
				return true
			},

			/**
			 * 保存数据
			 */
			async saveData() {
				if (this.submitting) return

				// 验证单据照片
				if (!this.validatePhotos()) {
					return
				}

				try {
					this.submitting = true

					// 保存汇总数据到本地存储
					uni.setStorageSync('factoryFormData', this.form)
					uni.setStorageSync('factoryBillPhotos', this.billPhotos)

					// 这里可以添加提交到服务器的逻辑
					console.log('保存汇总数据:', this.form)
					console.log('单据照片:', this.billPhotos)

					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})

					// 延迟返回首页
					setTimeout(() => {
						uni.navigateBack({
							delta: 2 // 返回两步，回到首页
						})
					}, 1500)

				} catch (error) {
					console.error('保存数据失败:', error)
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					})
				} finally {
					this.submitting = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.summary-detail-container {
		background: $bg-secondary;
		min-height: 100vh;
		position: relative;
		padding-top: 0;
		box-sizing: border-box;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: calc(88rpx + env(safe-area-inset-top));
		background: $bg-primary;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		padding-top: env(safe-area-inset-top);
		z-index: 1000;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		border-bottom: 1rpx solid $border-light;
	}

	.navbar-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: $radius-md;
		transition: all 0.3s ease;
	}

	.navbar-back:active {
		background: $bg-secondary;
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 48rpx;
		color: $text-primary;
		font-weight: 300;
		line-height: 1;
	}

	.navbar-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
		flex: 1;
		text-align: center;
	}

	.navbar-placeholder {
		width: 60rpx;
	}

	/* 表单滚动区域 */
	.form-scroll {
		flex: 1;
		width: 92%;
		padding: 0 32rpx;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		position: relative;
		z-index: 2;
	}

	.form-content {
		background: $bg-primary;
		border-radius: $radius-lg;
		margin: 12rpx auto 28rpx;
		padding: 30rpx;
		max-width: 660rpx;
		box-shadow: $shadow-md;
		border: 1rpx solid $border-light;
	}

	/* 表单项目 */
	.form-item {
		margin-bottom: 28rpx;
		position: relative;
	}

	.label-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
		padding-right: 8rpx;
	}

	.form-label {
		display: flex;
		align-items: center;
		font-size: $font-md;
		font-weight: 600;
		color: $text-primary;
		line-height: 1.4;
		gap: 6rpx;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid $border-light;
		border-radius: $radius-md;
		padding: 0 20rpx;
		font-size: $font-md;
		color: $text-primary;
		background: $bg-primary;
		transition: all 0.3s ease;
		box-sizing: border-box;
	}

	.form-input:focus {
		border-color: $primary;
		box-shadow: 0 0 0 6rpx rgba(30, 136, 229, 0.1);
		outline: none;
	}

	/* 照片相关样式 */
	.photo-card {
		background: $bg-primary;
		border-radius: $radius-lg;
		border: 1rpx solid $border-light;
		box-shadow: $shadow-md;
		padding: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.photo-header { display: flex; flex-direction: column; gap: 6rpx; }
	.photo-title { font-size: $font-lg; font-weight: 600; color: $text-primary; }
	.photo-desc { font-size: $font-sm; color: $text-secondary; }

	.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; }
	.photo-item { position: relative; border-radius: $radius-md; border: 2rpx solid $border-light; background: $bg-primary; box-shadow: $shadow-sm; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
	.photo-image { width: 100%; height: 100%; object-fit: cover; }
	.photo-delete { position: absolute; top: 8rpx; right: 8rpx; width: 40rpx; height: 40rpx; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
	.delete-icon { font-size: 28rpx; color: $text-white; line-height: 1; }
	.photo-item.upload { border-style: dashed; border-color: rgba(30,136,229,0.35); background: rgba(30,136,229,0.05); flex-direction: column; gap: 10rpx; }
	.photo-item.upload:active { background: rgba(30,136,229,0.12); border-color: $primary; }
	.upload-icon { width: 64rpx; height: 64rpx; border-radius: 50%; background: rgba(30,136,229,0.12); display: flex; align-items: center; justify-content: center; }
	.camera-icon { font-size: 36rpx; }
	.upload-text { font-size: $font-sm; color: $primary; font-weight: 600; }
	.upload-sub { font-size: 22rpx; color: $text-tertiary; }
	.photo-tip { font-size: 24rpx; color: $text-tertiary; }
	@media screen and (max-width: 600rpx) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

	/* 底部按钮组 */
	.button-group {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 20rpx;
		width: calc(100% - 60rpx);
		max-width: 680rpx;
		z-index: 10;
	}

	.prev-btn, .save-btn {
		flex: 1;
		height: 88rpx;
		border: none;
		border-radius: $radius-xl;
		font-size: $font-lg;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.prev-btn {
		background: rgba(255, 255, 255, 0.9);
		color: $text-secondary;
		border: 2rpx solid $border-light;
	}

	.prev-btn:active {
		background: $text-white;
		transform: translateY(2rpx);
	}

	.save-btn {
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		color: $text-white;
		box-shadow: $shadow-lg;
	}

	.save-btn:active {
		transform: translateY(2rpx);
		box-shadow: $shadow-md;
	}

	.save-btn.disabled {
		background: $text-disabled;
		color: $text-white;
		transform: none;
		box-shadow: none;
		opacity: 0.6;
	}
	
	/* 悬浮拍照按钮 */
	.photo-fab {
		position: fixed;
		right: 32rpx;
		bottom: calc(150rpx + env(safe-area-inset-bottom));
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		box-shadow: 0 8rpx 24rpx rgba(51, 136, 255, 0.35), 0 4rpx 12rpx rgba(51, 136, 255, 0.25);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		transition: all 0.3s ease;
	}

	.photo-fab:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(51, 136, 255, 0.3), 0 2rpx 8rpx rgba(51, 136, 255, 0.2);
	}

	.fab-icon {
		font-size: 48rpx;
		line-height: 1;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
	}
</style>